<!-- 单纯的提示一下 -->
<template>
  <div class="sim_view">
    <el-dialog title="条码核对" :visible.sync="dialogVisible" lock-scroll width="680px">
      <!-- <div slot="title"></div> -->
      <div class="dialog_div">
        <el-table :data="tableData" border style="width: 100%" max-height="500" :key="isUpdate">
          <el-table-column type="index" width="30" align="center"></el-table-column>
          <el-table-column prop="goodsCode" label="条码" width="150"></el-table-column>
          <el-table-column prop="goodsName" label="名称" width="150"></el-table-column>
          <el-table-column prop="number" label="数量" width="100"></el-table-column>
          <el-table-column prop="finishNumber" label="核对数量" width="100"></el-table-column>
          <el-table-column prop="result" label="核对结果" width="100"></el-table-column>
        </el-table>
        <div class="codeDiv">
          <span style="width:100px;">扫描条码：</span>
          <input ref="autofocus" class="input" v-model="text" @keyup.enter="codeChange" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="!finishStatus" @click="dialogVisible = false">核对完成</el-button>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    tipsData: Object,
  },
  data () {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false
    }
  },
  methods: {
    codeChange () {
      let value = this.text
      if (!value) {
        this.$elMessage.error('请输入商品条码！')
        return
      }
      console.log(value);
      let index = this.codeList.indexOf(value)
      if (index > -1) {
        let item = this.tableData[index]
        if (item.finishNumber < item.number) {
          item.finishNumber = item.finishNumber + 1
          item.result = '数量不足'
          if (item.finishNumber == item.number) {
            item.result = '数量无误'
            this.getContrastStatus()
          }
          this.isUpdate = !this.isUpdate
        } else {
          this.$elMessage.error('数量超出')
        }
      } else {
        this.$elMessage.error(`条码"${value}"无需入库`)
      }
    },
    getContrastStatus () {
      for (let index = 0; index < this.tableData.length; index++) {
        const item = this.tableData[index];
        if (item.finishNumber != item.number) {
          this.finishStatus = false
          return
        }
      }
      this.finishStatus = true
    },
    onConfirm () {
      this.dialogVisible = !this.dialogVisible
      this.$emit('onConfirm', this.tipsData.tipsMark)
    },
    show (data) {
      this.dialogVisible = true
      this.codeList = []
      this.text = ''
      this.finishStatus = false

      this.tableData = data
      this.tableData.forEach((item) => {
        item.finishNumber = 0
        item.result = '等待核对'
        this.codeList.push(item.goodsCode)
      })
      this.$nextTick(() => {
        this.$refs.autofocus.focus()
      })
    },
    hide () {
      this.dialogVisible = false
    },
    sure () {
      this.$emit('onSure')
      this.hide()
    },
  },
}
</script>

<style lang="scss" scoped>
.sim_view {
  ::v-deep .el-dialog {
    .el-dialog__body {
      padding-bottom: 10px;
    }
  }
}
.codeDiv {
  display: flex;
  padding: 30px 0;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.input {
  flex: 1;
  border: 1px solid #ebeef5;
  height: 40px;
  padding: 0 10px;
  border-radius: 5px;
}
.input:focus {
  outline: 1px solid #1890ff;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  ::v-deep .el-button {
    width: 100px;
    height: 40px;
    margin: 0 15px;
  }
}
</style>